import {ChangeDetectorRef, Component, EventEmitter, OnInit, Output} from '@angular/core';
import {Element} from "../../model/element";
import "reflect-metadata";
import {Meta} from "../../model/meta";
import {NzMessageService} from "ng-zorro-antd/message";
import {NzModalService} from "ng-zorro-antd/modal";
import {RegisterMetaKey} from "../../model/decorator";
import {HttpClient, HttpEventType, HttpRequest} from "@angular/common/http";
import {last, tap} from "rxjs/operators";
import { ConfigService } from '../../services/config.service';

@Component({
    selector: 'app-element-editor',
    templateUrl: './element-editor.component.html',
    styleUrls: ['./element-editor.component.scss']
})
export class ElementEditor implements OnInit {
    visible: boolean = false;
    element: Element;
    clone: Element;
    mode: boolean = false; // create for true, edit for false
    editable: boolean = false;
    modified: boolean = false; //children add or remove
    properties: Array<Meta>;

    @Output() onCreate = new EventEmitter<any>();
    @Output() onEdit = new EventEmitter<any>();

    constructor(private http: HttpClient, public configService: ConfigService, private changeDetector: ChangeDetectorRef, private modal: NzModalService, private message: NzMessageService,) {
    }

    ngOnInit() {
    }

    create(type) {
        this.mode = true;
        this.editable = true;
        this.modified = false;
        this.clone = new type();
        this.clone.create();
        this.properties = this.getProperties();
        this.visible = true;
    }

    edit(element) {
        this.mode = false;
        this.editable = true;
        this.modified = false;
        this.element = element;
        this.clone = this.element.clone();
        this.properties = this.getProperties();
        this.visible = true;
    }

    show(element) {
        this.mode = false;
        this.editable = false;
        this.modified = false;
        this.element = element;
        this.clone = this.element.clone();
        this.properties = this.getProperties();
        this.visible = true;
    }

    save() {
        if (this.mode) {
            this.onCreate.emit(this.clone);
        } else {
            this.element.copy(this.clone);
            this.onEdit.emit(this.element);
        }
        this.visible = false;
    }

    close() {
        if (this.modified) {
            this.modal.confirm({
                nzTitle: '提示！',
                nzContent: '是否确认取消编辑？',
                nzOkText: '确定',
                nzOkType: 'primary',
                nzOnOk: () => {
                    this.visible = false;
                }
            });
        } else {
            this.visible = false;
        }
    }

    getProperties() {
        const properties = new Array<Meta>();
        Object.keys(this.clone).forEach(property => {
            const meta = new Meta();
            meta.init(this.clone, property);
            if (meta.editor == 'Table') {
                meta.columns = new Array<Meta>();
                const element = new meta.children();
                Object.keys(element).forEach(property => {
                    const sub = new Meta();
                    sub.init(element, property);
                    sub.column && meta.columns.push(sub);
                });
            }
            meta.editor && properties.push(meta);
        });
        return properties;
    }

    addChild(child, property) {
        this.clone[property.key] = this.clone[property.key] || [];
        this.clone[property.key].push(child);
        this.clone[property.key] = this.clone[property.key].filter(item => true);
        this.modified = true;
    }

    updateChild(property) {
        this.modified = true;
    }

    removeChild(property, index) {
        this.modal.confirm({
            nzTitle: '提示！',
            nzContent: '是否确认删除，删除后将不可恢复？',
            nzOkText: '确定',
            nzOkType: 'primary',
            nzOnOk: () => {
                this.clone[property.key].splice(index, 1);
                this.clone[property.key] = this.clone[property.key].filter(item => true);
            }
        });
    }

    cascade(property) {
        if (!property.multiple) {
            this.properties.forEach(meta => {
                if (meta.cascade_parent == property.key) {
                    meta.list = this.clone[property.key][meta.cascade_children];
                }
            });
        }
    }

}
